<script setup name="MenuTab">
import {baseStore} from "@/store/baseStore.js";
import {onMounted} from "vue";

let bs = baseStore()
let {menuTab} = storeToRefs(bs)
const useR = useRouter()
const cr = useR.currentRoute
let tabsState = useR.tabsState

const resize = async () => {
    let node = document.getElementsByClassName("menu-tab-row")[0]
    lr.value = node.scrollWidth > node.clientWidth
    // 让被路由的 标签在可见范围
    let doms = document.getElementsByClassName("menu-tab-item")
    let width = 0;
    for (let i = 0; i < doms.length; i++) {
        await doSomething(doms[i]).then(item => {
            if (!item.classList.contains("menu-tab-item-active")) {
                width += item.clientWidth
                return
            }
            node.scrollTo({left: width})
        });
    }
}

function doSomething(item) {
    return new Promise((resolve, reject) => {
        resolve(item)
    });
}

const left = () => {
    let node = document.getElementsByClassName("menu-tab-row")[0]
    node ? node.scrollTo({left: node.scrollLeft - 200}) : '';
}
const right = () => {
    let node = document.getElementsByClassName("menu-tab-row")[0]
    node ? node.scrollTo({left: node.scrollLeft + 200}) : '';
}
const remove = (index) => {
    // 获取 index 前一位
    let item = tabsState.value.splice(index, 1)
    removeMenuTabStore(item)
    resize()
    if (index === 0) {
        // 路由到前一位
        useR.push(tabsState.value[index])
    } else {
        useR.push(tabsState.value[index - 1])
    }
}
const toPath = (item) => {
    useR.push(item.path)

}
// 监听路由或窗口变动而进行是否显示左右按钮
let lr = ref(false)
watch(useR.currentRoute, (nv, ov) => {
    addMenuTabStore(nv)
    resize()
})
window.addEventListener('resize', () => {
    resize()
})
// 浏览器切换事件
document.addEventListener('visibilitychange', function () {
    if (document.visibilityState === 'hidden') {
        // 离开当前tab标签
    } else {
        resize()
        // 回到当前tab标签
    }
});
onMounted(() => {
    addMenuTabStore(cr.value)
})
const addMenuTabStore = (item) => {
    if (menuTab.value.indexOf(item.name) === -1) {
        menuTab.value.push(item.name)
    }
}
const removeMenuTabStore = (item) => {
    let index = menuTab.value.indexOf(item[0].name)
    menuTab.value.splice(index, 1)
}
</script>
<template>
    <el-row class="menu-tab">
        <el-icon v-show="lr" class="menu-tab-lr is-active" @click="left">
            <ArrowLeftBold />
        </el-icon>
        <el-row class="menu-tab-row">
            <el-row v-for="(item,index) in tabsState"
                    class="menu-tab-item is-active"
                    @click="toPath(item)"
                    :class="item.path === cr.path? 'menu-tab-item-active':''">
                <el-row class="menu-tab-item-title">{{ $t(item.meta.ln) }}</el-row>
                <el-icon class="menu-tab-item-icon" v-if="tabsState.length > 1" @click.stop="remove(index)">
                    <CloseBold />
                </el-icon>
            </el-row>
        </el-row>
        <el-icon v-show="lr" class="menu-tab-lr is-active" @click="right">
            <ArrowRightBold />
        </el-icon>
    </el-row>
</template>

<style lang="scss" scoped>
.menu-tab {
    height: 58px;
    width: 100%;
    cursor: pointer;
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;

    .menu-tab-lr {
        margin: 0 5px 0 5px;
        height: 100%;
        width: 15px;
    }

    .menu-tab-lr:active {
        background-color: var(--el-bg-color);
    }

    .menu-tab-row {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;

        .menu-tab-item {
            display: flex;
            flex-wrap: nowrap;
            padding: 0 15px 0 15px;
            height: 100%;
            align-items: center;
        }

        .menu-tab-item:active {
            background-color: var(--el-bg-color);
        }

        .menu-tab-item:hover {
            .menu-tab-item-icon {
                --color: inherit;
                background-color: var(--el-text-color-primary);
            }
        }

        .menu-tab-item-title {
            font-size: 1.1em;
            white-space: nowrap;
            user-select: none;
        }

        .menu-tab-item-icon {
            margin: 2px 0 0 5px;
            font-size: .8em;
            padding: 1px;
            color: var(--el-border-color);
            border-radius: 10px;
        }

        .menu-tab-item-active {
            background-color: var(--el-menu-hover-bg-color);
            color: var(--el-menu-active-color);
        }
    }
}

</style>
